<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!--通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .layui-layout-admin .layui-header {
            background-color: #20222A;
        }

        .layui-layout-admin .layui-side {
            background-color: #2F363c;
        }

        .layui-layout-admin .layui-footer {
            text-align: center;
        }

        div {
            box-sizing: border-box;
        }
    </style>
</head>

<body class="layui-layout-body">

    <div class="layui-layout layui-layout-admin">
        <!-- 头部 -->
        <div class="layui-header">
            <div class="layui-logo">后台管理系统</div>
            <!-- 右侧顶部导航 -->
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">用户中心</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">基本资料</a></dd>
                        <dd><a href="">安全设置</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">退出</a></li>
            </ul>
        </div>

        <!-- 左侧菜单 -->
        <div class="layui-side">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="side-menu">

                </ul>
            </div>
        </div>

        <!-- 主体内容区域 -->
        <div class="layui-body">
            <div style="position: absolute;top:0;left:0;right:0;height:30px;line-height:30px;background-color: #fff;">
                <span class="layui-breadcrumb" style="padding-left:10px;color:#888;">
                    <span>首页</span>
                </span>
            </div>
            <div style="height:calc(100% - 30px);padding: 10px;background-color: #ddd;margin-top:30px;">
                <iframe id="content-iframe" src="main.html" frameborder="0" width="100%" height="100%"
                    style="background-color: #fff;"></iframe>
            </div>
        </div>

        <!-- 底部 -->
        <div class="layui-footer">
            © 2023 后台管理系统 - 版权所有
        </div>
    </div>

    <script src="layui/layui.js"></script>
    <script>

        layui.use(['layer', 'element', 'jquery'], function () {
            let layer = layui.layer
            let element = layui.element
            let $ = layui.jquery
            // 监听左侧菜单点击事件
            $('.layui-nav-tree').on('click', '.layui-nav-item a', function (e) {
                //alert($(this).parent().attribute('class'))
                if (!$(this).parent().hasClass('layui-nav-itemed')) {

                    $(this).parent().removeClass('layui-nav-itemed');
                } else {

                    // 如果是父级菜单（有子菜单）
                    if ($(this).next('.layui-nav-child').length > 0) {
                        // alert("2");
                        // 移除其他所有展开的菜单项
                        $('.layui-nav-item').not($(this).parent()).removeClass('layui-nav-itemed');
                        // 切换当前点击项的展开状态
                        $(this).parent().addClass('layui-nav-itemed');
                    }
                }
                //alert("3");
            });


            $(function () {
                $.ajax({
                    url: 'data/menu.json',
                    dataType: 'json',
                    success: function (data) {
                        let obj = data;
                        let menuStr = '';
                        for (let i = 0; i < obj.length; i++) {
                            if (obj[i].name === '首页') {
                                menuStr += '<li class="layui-nav-item layui-this"><a href="javascript:openMenu(\'' + obj[i].code + '\',\'' + obj[i].name + '\',\'' + obj[i].url + '\');">' + obj[i].name + '</a></li>';
                            } else if (obj[i].children && obj[i].children.length > 0) {
                                menuStr += '<li class="layui-nav-item"><a href="javascript:;">' + obj[i].name + '</a>';
                                menuStr += '<dl class="layui-nav-child">';
                                for (let j = 0; j < obj[i].children.length; j++) {
                                    menuStr += '<dd><a href="javascript:;" onclick="openMenu(\'' + obj[i].children[j].code + '\',\'' + obj[i].children[j].name + '\',\'' + obj[i].children[j].url + '\')">' + obj[i].children[j].name + '</a></dd>';
                                }
                                menuStr += '</dl></li>';
                            } else {
                                menuStr += '<li class="layui-nav-item"><a href="javascript:;" onclick="openMenu(\'' + obj[i].code + '\',\'' + obj[i].name + '\',\'' + obj[i].url + '\')">' + obj[i].name + '</a></li>';
                            }

                        }
                        $('.layui-nav-tree').html(menuStr);
                        element.render('nav');
                    },
                    error: function () {
                        layer.msg('菜单加载失败！');
                    }
                })
            });



        });

        function openMenu(code, name, url) {
            layui.$('#content-iframe').attr('src', url);
        }
    </script>
</body>

</html>